<template>
    <div class="password-container">
      <div class="header">
        <button class="back-button" @click="goBack">
          <i class="arrow-left">←</i>
        </button>
        <h2>修改密码</h2>
      </div>
      <form @submit.prevent="savePassword">
        <div class="input-group">
          <label for="oldPassword">旧密码：</label>
          <input
            id="oldPassword"
            class="input-field"
            type="password"
            placeholder="请输入旧密码"
            v-model="oldPassword"
          />
        </div>
        <div class="input-group">
          <label for="newPassword">新密码：</label>
          <input
            id="newPassword"
            class="input-field"
            type="password"
            placeholder="请输入新密码"
            v-model="newPassword"
          />
        </div>
        <div class="input-group">
          <label for="confirmPassword">确认密码：</label>
          <input
            id="confirmPassword"
            class="input-field"
            type="password"
            placeholder="请确认新密码"
            v-model="confirmPassword"
          />
        </div>
        <button type="submit" class="save-button">保存</button>
      </form>
      <div class="form-info">
        <p>请确保您的新密码包含大写字母、小写字母和数字，以增强账户安全性。</p>
        <p>如果您忘记了旧密码，请联系管理员重置。</p>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "PasswordChange",
    data() {
      return {
        oldPassword: "",
        newPassword: "",
        confirmPassword: ""
      };
    },
    methods: {
      savePassword() {
        // 这里可以添加保存密码的逻辑
        console.log("旧密码:", this.oldPassword);
        console.log("新密码:", this.newPassword);
        console.log("确认密码:", this.confirmPassword);
      },
      goBack() {
        // 返回上一页的逻辑，根据具体应用场景可以修改
        this.$router.go(-1);
      }
    }
  };
  </script>
  
  <style scoped>
  .password-container {
  padding: 20px;
  background-color: #e8f5e9;
  font-size: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 填满整个视口高度 */
  justify-content: space-between; /* 让顶部和底部内容分开 */
}
form {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  flex-grow: 1; /* 让表单内容填充剩余空间 */
}
  .header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .back-button {
    background-color: transparent;
    border: none;
    color: #556b2f;
    font-size: 20px;
    cursor: pointer;
    margin-right: 10px;
  }
  
  h2 {
    color: #556b2f;
    margin: 0;
    margin-right: 50px; /* 向右移动一点点 */
    flex-grow: 1;
    text-align: center;
  }
  
  .input-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
  }
  
  .input-field {
    padding: 10px;
    border: 1px solid #c1e1c1;
    border-radius: 4px;
    background-color: #dcedc8;
    font-size: 16px;
    margin-top: 5px;
  }
  
  .save-button {
    padding: 10px 20px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    margin: 20px auto 0; /* 居中对齐并增加顶部间距 */
  }
  
  .save-button:hover {
    background-color: #45a049;
  }
  
  .form-info {
    margin-top: 20px;
    text-align: center;
    color: #556b2f;
    background-color: #e8f5e9; /* 设置背景色与页面一致 */
    padding: 15px; /* 增加内边距 */
    border-radius: 8px; /* 圆角 */
  }
  
  p {
    margin: 5px 0;
  }
  </style>
  